<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>S.Switchable Demo</title>

<script src="../../build/kissy.js"></script>
<script src="../../build/datalazyload/datalazyload-pkg.js"></script>

<script src="switchable.js"></script>

<script src="mod-autoplay.js"></script>
<script src="mod-effect.js"></script>
<script src="mod-circular.js"></script>
<script src="mod-lazyload.js"></script>
<script src="mod-countdown.js"></script>
<script src="mod-autorender.js"></script>

<script src="widget-tabs.js"></script>
<script src="widget-slide.js"></script>
<script src="widget-carousel.js"></script>
<script src="widget-accordion.js"></script>

<link rel="stylesheet" href="../../build/cssbase/base-min.css"/>
<style>
    body { padding: 20px 50px 50px; }
    h2 { margin: 30px 0 10px; font-size: 17px; }
    .loading { background: #EBF5FA url(assets/loading.gif) no-repeat 50% 50%; }

    p.code-switch { color: #09f; cursor: pointer; margin-top: 10px; }
    pre.code {
        color: #444;
        cursor: auto;
        border-left: 2px solid #7F96AA;
        margin-top: 5px;
        padding: 0 10px 20px 10px;
        font-size: 14px;
    }
</style>
</head>

<body>
<h2>Tabs - 普通标签页</h2>
<style>
    #demo1 { position: relative; width: 750px; padding-top: 29px; }
    #demo1 .ks-switchable-nav { position: absolute; left: 20px; margin-top: -29px; z-index: 99; }
    #demo1 .ks-switchable-nav li {
        float: left;
        width: 130px;
        height: 27px;
        line-height: 21px;
        text-align: center;
        background: url(assets/tabs-sprite.gif) no-repeat 0 6px;
        margin-right: 3px;
        padding-top: 8px;
        cursor: pointer;
    }
    #demo1 .ks-switchable-nav li.ks-active { background-position: 0 -40px; cursor: default; }
    #demo1 .ks-switchable-content {
        position: relative;
        height: 120px;
        padding: 20px;
        border: 1px solid #AEC7E5;
    }
</style>
<div id="demo1" class="KS_Widget section" data-widget-type="Tabs">
    <ul class="ks-switchable-nav">
        <li class="ks-active">标题 A</li>
        <li>标题 B</li>
        <li>标题 C</li>
        <li>标题 D</li>
        <li>标题 E</li>
    </ul>
    <div class="ks-switchable-content">
        <div>内容 A</div>
        <div style="display: none">内容 B</div>
        <div style="display: none">内容 C</div>
        <div style="display: none">内容 D</div>
        <div style="display: none">内容 E</div>
    </div>
</div>

<h2>Slide - 淘宝首页卡盘</h2>
<style>
    #demo2 { position: relative; width: 470px; height: 150px; border: 1px solid #B6D1E6; overflow: hidden; }
    #demo2 .ks-switchable-nav { position: absolute; bottom: 5px; right: 5px; z-index: 99; }
    #demo2 .ks-switchable-nav li {
        float: left;
        width: 16px;
        height: 16px;
        line-height: 16px;
        margin-left: 3px;
        background-color: #FCF2CF;
        border: 1px solid #F47500;
        color: #D94B01;
        text-align: center;
        cursor: pointer;
    }
    #demo2 .ks-switchable-nav li.ks-active {
        width: 18px;
        height: 18px;
        line-height: 18px;
        margin-top: -1px;
        color: #FFF;
        background-color: #FFB442;
        font-weight: bold;
    }
    #demo2 .ks-switchable-content li { height: 150px; width: 470px; overflow: hidden; }
    /* for countdown plugin */
    #demo2 .ks-switchable-nav li,
    #demo2 .ks-switchable-trigger-content {
        position: relative;
    }
    #demo2 .ks-switchable-trigger-mask {
        position: absolute;
        right: 0;
        width: 18px;
        height: 18px;
        background-color: #FF9415;
        visibility: hidden
    }
    #demo2 .ks-active .ks-switchable-trigger-mask {
        visibility: visible
    }
</style>
<div id="demo2" class="KS_Widget section loading" data-widget-type="Slide" data-widget-config="{'effect':'scrolly','easing':'easeOutStrong','countdown':true}">
    <ol class="ks-switchable-content">
        <li><a href="http://ju.atpanel.com/?url=http://www.taobao.com/go/act/discount/hdfk091222.php?ad_id=&amp;am_id=&amp;cm_id=1400213687422f80dd4d&amp;pm_id=150021371293fce706af" target="_blank"><img alt="" src="http://img05.taobaocdn.com/tps/i5/T1HllqXjXpXXXXXXXX-470-150.jpg"/></a></li>
        <li class="hidden"><a target="_blank" href="http://click.mz.simba.taobao.com/cc_mt?p=&amp;s=24760534&amp;e=%2FzU1KBMrzT1jMRVFtqDNyn1tgJqIJA3Hy9QloO7MbgHOIBqxgkWBGKUTW8JURsTh01ynhY4RKTMplHfnVnxiYajw5JHBVqSAXBrj%2Bf%2BTLVcq5t6PSe6eCT%2F8Tn1KGQ46A85BMYIsMXzYy8dzkPxQZCyLyt0ostjNaENU1Z0QCSZaXSgNYtb%2FwhYogN3jOrIE2Q9NE12H0Hk111VWqQddJzvjKwdymURFo%2BK2etf0wTrlhYBv%2B5sdunm4S3KBeGdooeLPkaQt4Mg4u3TgCNezGX1Mh9B64cCdF8VN3SsQNW%2BgArkM4F%2BFplGwl1UuyTCLtMOb3cgDCxBQldTmR3mwFhNV09QNPjZ2bUxM3CBHkfb2wyn42y1yjjwMVjNQnmpt4NEtPh%2F5PsbupFa6ZZ2sVQdCo%2FjLJ9sf&amp;ec=ffloYVIRbFZ%2BaahPJekdUQ%3D%3D&amp;c=17016"><img alt="" width="470" height="150" border="0" src="http://img.alimama.cn/bcrm/adboard/picture/2009-12-24/091224170529.gif"/></a></li>
        <li class="hidden"><a target="_blank" href="http://click.mz.simba.taobao.com/cc_mt?p=&amp;s=24760534&amp;e=%2FzU1KBMrzT1jMRVFtqDNyn1tgJqIJA3Hy9QloO7MbgHOIBqxgkWBGKUTW8JURsTh01ynhY4RKTMplHfnVnxiYajw5JHBVqSAXBrj%2Bf%2BTLVcq5t6PSe6eCT%2F8Tn1KGQ46A85BMYIsMXzYy8dzkPxQZCyLyt0ostjNaENU1Z0QCSZaXSgNYtb%2FwhYogN3jOrIE2Q9NE12H0Hk111VWqQddJzvjKwdymURFo%2BK2etf0wTrlhYBv%2B5sdunm4S3KBeGdooeLPkaQt4Mg4u3TgCNezGX1Mh9B64cCdF8VN3SsQNW%2BgArkM4F%2BFplGwl1UuyTCLtMOb3cgDCxBQldTmR3mwFhNV09QNPjZ2bUxM3CBHkfb2wyn42y1yjjwMVjNQnmpt4NEtPh%2F5PsbupFa6ZZ2sVQdCo%2FjLJ9sf&amp;ec=ffloYVIRbFZ%2BaahPJekdUQ%3D%3D&amp;c=17016"><img alt="" width="470" height="150" border="0" src="http://img.alimama.cn/bcrm/adboard/picture/2009-12-29/091229160359.jpg"/></a></li>
        <li class="hidden"><a href="http://ju.atpanel.com/?url=http://www.taobao.com/go/act/focus/nzdc_qqg2.php?TBG=7285.module-1.4&amp;ad_id=&amp;am_id=&amp;cm_id=140021305131ef184707&amp;pm_id=15002137139b40e4bba3" target="_blank"><img alt="" src="http://img01.taobaocdn.com/tps/i1/T1qS0qXhBhXXXXXXXX-470-150.jpg"/></a></li>
        <li class="hidden">
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="470" height="150" class="holiday-logo">
                <param name="movie" value="http://img04.taobaocdn.com/tps/i4/T1bblrXfBrXXXXXXXX.swf"/>
                <param name="quality" value="high"/>
                <param name="swfversion" value="8.0.0"/>
                <param name="wmode" value="opaque"/>
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="http://img04.taobaocdn.com/tps/i4/T1bblrXfBrXXXXXXXX.swf" width="470" height="150" name="holiday-logo" class="holiday-logo">
                    <param name="wmode" value="opaque"/>
                </object>
                <!--<![endif]-->
            </object>
        </li>
    </ol>
</div>

<h2>Slide - 有啊首页卡盘</h2>
<style>
    #demo3 {
        position: relative;
        width: 515px;
        height: 220px;
        border: 1px solid #D3D2D2;
        padding: 1px;
        overflow: hidden;
    }
    #demo3 .yslider-stick {
        position: absolute;
        top: 0;
        right: 0;
        width: 106px;
        font-size: 14px;
        background: #fff;
        margin: 1px;
        z-index: 99;
    }
    #demo3 .yslider-stick li {
        border-bottom: 1px solid #EDEDED;
    }
    #demo3 .yslider-stick li a {
        display: block;
        text-indent: 15px;
        padding: 8px 5px;
        color: #666;
    }
    #demo3 .yslider-stick li.selected {
        background-color: #C8282B;
    }
    #demo3 .yslider-stick li.selected a {
        color: #fff;
        border-left: 3px solid #B30024;
    }
    #demo3 .yslider-stage {
        height: 220px;
        width: 405px;
    }
</style>
<div id="demo3" class="KS_Widget section" data-widget-type="Slide" data-widget-config="{'navCls':'yslider-stick','contentCls':'yslider-stage','activeTriggerCls':'selected','delay':0.2,'effect':'fade','easing':'easeBoth','duration':0.8,'autoplay':false}">
    <div class="yslider-stage">
        <p><a href="http://co.youa.baidu.com/content/promo/zhongjimiaoshazong/index.html" target="_blank"><img width="405" height="220" alt="终极秒杀场" src="http://co.youa.baidu.com/picture/r/image/2009-12-25/236d430f443d05925ad7291d9ad6b560.jpg"/></a></p>
        <p><a href="http://youa.baidu.com/zc" target="_blank"><img width="405" height="220" alt="9折话费" src="http://co.youa.baidu.com/picture/r/image/2009-12-25/4b2e801b6d174648ec77678d4a9f32e8.jpg"/></a></p>
        <p><a href="http://co.youa.baidu.com/content/lottery/chrislotact/index.html?c=676" target="_blank"><img  width="405" height="220" alt="彩票大派送" src="http://co.youa.baidu.com/picture/r/image/2009-12-21/eb76df2598316e6b5e52cd94ae2e3f1b.jpg"/></a></p>
        <p><a href="http://co.youa.baidu.com/content/promo/nianzhongjihe/index.html" target="_blank"><img  width="405" height="220" alt="限量抢购" src="http://co.youa.baidu.com/picture/r/image/2009-12-25/cc60334e6a75fab260e680cfc2b35ea7.jpg"/></a></p>
        <p><a href="http://youa.baidu.com/shop/3710a13d15c375285841ef08/tab/0344b67328e77dc92132cad9" target="_blank"><img  width="405" height="220" alt="周末购" src="http://co.youa.baidu.com/picture/r/image/2009-12-27/74538ac61dc0836f5d40d29b181868fc.jpg"/></a></p>
        <p><a href="http://co.youa.baidu.com/content/promo/xmas09/index.html?c=740" target="_blank"><img  width="405" height="220" alt="年终风暴" src="http://co.youa.baidu.com/picture/r/image/2009-12-23/d69f75d92daf625053bd0f92f2b5e586.jpg"/></a></p>
    </div>
    <ul class="yslider-stick">
        <li class="selected"><a href="http://co.youa.baidu.com/content/promo/xmas09/index.html?c=740" target="_blank">年终风暴</a></li>
        <li><a href="http://co.youa.baidu.com/content/promo/zhongjimiaoshazong/index.html" target="_blank">终极秒杀场</a></li>
        <li><a href="http://youa.baidu.com/zc" target="_blank">9折话费</a></li>
        <li><a href="http://co.youa.baidu.com/content/lottery/chrislotact/index.html?c=676" target="_blank">彩票大派送</a></li>
        <li><a href="http://co.youa.baidu.com/content/promo/nianzhongjihe/index.html" target="_blank">限量抢购</a></li>
        <li><a href="http://youa.baidu.com/shop/3710a13d15c375285841ef08/tab/0344b67328e77dc92132cad9" target="_blank">周末购</a></li>
    </ul>
</div>

<h2>Carousel - 旋转木马</h2>
<style>
    .scrollable {
        position: relative;
        width: 820px;
    }
    .scrollable .prev, .scrollable .next {
        position: absolute;
        top: 50px;
        color: #666;
        cursor: pointer;
    }
    .scrollable .prev { left: 10px; }
    .scrollable .next { right: 10px; }
    .scrollable .disable { color: #ddd; cursor: default; }

    .scrollable .ks-switchable-nav {
        position: absolute;
        right: 30px;
        top: -10px;
    }
    .scrollable .ks-switchable-nav li {
        float: left;
        padding: 5px;
        font-size: 18px;
        cursor: pointer;
    }
    .scrollable .ks-switchable-nav li.ks-active {
        color: #C8282B;
    }

    .scroller {
        position: relative;
        width: 680px;
        height: 120px;
        border: 1px solid #ccc;
        background-color: #F9F9F9;
        margin: auto;
        overflow: hidden;
    }
    .scroller .ks-switchable-content img {
        float: left;
        width: 100px;
        height: 75px;
        padding: 2px;
        margin: 20px 15px;
        background-color: #fff;
        border: 1px solid #ccc;
        display: inline !important; /* fix ie6 双边距 bug */
    }
</style>
<div id="demo4" class="KS_Widget section scrollable" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','easing':'easeOutStrong','steps':5,'viewSize':[680],'circular':false,'prevBtnCls':'prev','nextBtnCls':'next','disableBtnCls':'disable','lazyDataType':'img-src'}">
    <span id="scroller-prev" class="prev disable">&lsaquo; 上一页</span>
    <span id="scroller-next" class="next">下一页 &rsaquo;</span>
    <div class="scroller">
        <div class="ks-switchable-content">
            <!-- 1-5 -->
            <img alt="" src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg"/>
            <img alt="" src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg"/>
            <img alt="" src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg"/>
            <img alt="" src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg"/>
            <img alt="" src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg"/>
            <!-- 5-10 -->
            <img alt="" data-ks-lazyload-custom="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg"/>
            <img alt="" data-ks-lazyload-custom="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg"/>
            <img alt="" data-ks-lazyload-custom="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg"/>
            <img alt="" data-ks-lazyload-custom="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg"/>
            <img alt="" data-ks-lazyload-custom="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg"/>
            <!-- 10-15 -->
            <img alt="" data-ks-lazyload-custom="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg"/>
            <img alt="" data-ks-lazyload-custom="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg"/>
            <img alt="" data-ks-lazyload-custom="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg"/>
            <img alt="" data-ks-lazyload-custom="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg"/>
            <img alt="" data-ks-lazyload-custom="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg"/>
        </div>
        <ul class="ks-switchable-nav">
            <li class="ks-active">&bull;</li>
            <li>&bull;</li>
            <li>&bull;</li>
        </ul>
    </div>
</div>

<h2>Slide - 有啊滚动新闻条</h2>
<style>
    .scroll-news { height: 20px; overflow: hidden; }
    .scroll-news a { color: #FF7E00; }
</style>
<div id="demo5" class="KS_Widget scroll-news" data-widget-type="Slide" data-widget-config="{'contentCls':'news-items','hasTriggers':false,'effect':'scrolly','easing':'easeOutStrong','interval':3,'duration':0.2}">
    <ul class="news-items">
        <li><a target="_blank" href="http://youa.baidu.com/shop/72e01b38fb26b4ebc5db0136">“一分钱”轻松体验有啊网购流程</a></li>
        <li><a target="_blank" href="http://co.youa.baidu.com/content/payhelp/b12/zhaoshang/">开通网银，百付宝为您一路护航</a></li>
        <li><a target="_blank" href="http://co.youa.baidu.com/picture/r/mall/guide/index.html">新手买家？帮助教程带您走通有啊</a></li>
        <li><a target="_blank" href="http://youa.baidu.com/static/help/quality_form_build.html">尽情挥洒你的创意，共建百度有啊</a></li>
        <li><a target="_blank" href="http://co.youa.baidu.com/content/help/A10/2008-09-06/153433185574.html">认准标识，精选实力卖家任您选择</a></li>
        <li><a target="_blank" href="http://co.youa.baidu.com/content/help/A3/2/2008-09-01/143723181295.html#10">收藏</a> + <a target="_blank" href="http://co.youa.baidu.com/content/help/A3/2009-01-08/112820209991.html">购物车</a>，逛街搜店更便捷</li>
    </ul>
</div>

<h2>Accordion - 手风琴</h2>
<style>
    #accordion1 {width:300px;border:1px solid #ccc;}
    #accordion1 .ks-switchable-trigger{padding:3px 10px;cursor:pointer;border-bottom:1px solid #ddd;background:#f3f3f3;overflow:hidden; height: 18px;}
    #accordion1 .ks-switchable-trigger h3{float: left; width: 100px; margin-left: 5px; }
    #accordion1 .ks-switchable-panel{height:150px;padding:3px 10px;border-bottom:1px solid #ddd;}
    #accordion1 .ks-icon{float:left;width:12px;height:12px;overflow:hidden;margin-top:2px;font-size:0;vertical-align:middle;background:url(assets/accordion-sprite.png) no-repeat 0 0;}
    #accordion1 .ks-active .ks-icon{background-position:-20px 0;}
    #accordion1 .last-trigger { border-bottom-width: 0 }
    #accordion1 .ks-active { border-bottom-width: 1px }
    #accordion1 .last-panel { border-bottom: none }
</style>
<div id="accordion1" class="KS_Widget section" data-widget-type="Accordion">
    <div class="ks-switchable-trigger ks-active"><i class="ks-icon"></i><h3>标题A</h3></div>
    <div class="ks-switchable-panel">
        1、支持鼠标滑过和点击触点两种方式<br/>
        2、支持同时展开多个面板
    </div>
    <div class="ks-switchable-trigger"><i class="ks-icon"></i><h3>标题B</h3></div>
    <div class="ks-switchable-panel" style="display:none;">内容B<br/>内容B<br/>内容B</div>
    <div class="ks-switchable-trigger"><i class="ks-icon"></i><h3>标题C</h3></div>
    <div class="ks-switchable-panel" style="display:none;">内容C<br/>内容C<br/>内容C<br/>内容C<br/>内容C</div>
    <div class="ks-switchable-trigger last-trigger"><i class="ks-icon"></i><h3>标题D</h3></div>
    <div class="ks-switchable-panel last-panel" style="display:none;">内容D<br/>内容D<br/>内容D</div>
</div>

<script>
KISSY.ready(function(S) {
   S.Switchable.autoRender(); 
});
</script>
</body>
</html>
